<template lang="pug">
betterScroll.home 
    .home-box
        .swiper
            mt-swipe
                mt-swipe-item
                    img(src="~@/assets/img/s1.png") 
                mt-swipe-item
                    img(src="~@/assets/img/s2.png") 
        .search
            i.iconfont.icon-sousuo
            input(placeholder='搜索内容、商品等关键字')
        .line
        .tabs
            .item
                img(src="~@/assets/img/t1.png")
                router-link(to="/home/culture") 茶文化
            .item
                img(src="~@/assets/img/t2.png")
                router-link(to="/home/activity") 茶活动
            .item
                img(src="~@/assets/img/t3.png")
                router-link(to="/home/room") 茶课堂
            .item
                img(src="~@/assets/img/t4.png")
                router-link(to="/home/quan") 茶道圈
        .line
        .info
            .title information
            homeList(:list="homeList")
        .more
            .more-tit 查看更多
            .img
                img(src="http://cms.apppark.cn/app/upload/10656189/20180403175027_727.jpg")
        .dity
            .title commdity
            dityList(:list="dityList")
            
    router-view
   
</template>
<script>
import betterScroll from "@/views/whx/components/homes/betterScroll"
import homeList from "@/views/whx/components/homes/homeList"
import dityList from "@/views/whx/components/homes/dityList"
export default {
    components: {
        homeList,
        dityList,
        betterScroll
    },
    data () {
        return {
            homeList: [],
            dityList: []      
        }
    },
    created () {
        this.axios.get('/data/zuixin.json').then(res=>{
            this.homeList=res.data.item;
        })
        this.axios.get('/data/home-goods.json').then(res=>{
            this.dityList=res.data.item;
        })
    }
}
</script>
<style scoped lang="sass">
.home 
    width: 100%
    height: 100vh
    overflow: hidden
    .dity
        padding-bottom: 1.16rem
        .title
            line-height: 1.08rem
            text-align: center
            font-size: .4rem
            color: #8b8b8b
    .more
        .more-tit
            font-size: .28rem
            color: #878787
            line-height: .88rem
            border-top: 2px solid #f5f5f5
            text-align: center
        .img
            height: 2.4rem
            background: #f3f4f6
            overflow: hidden
            img
                width: 100%
                height: 2.04rem
                display: block
                margin: .18rem 0
    .info
        margin-bottom: .44rem
        .title
            line-height: 1.08rem
            text-align: center
            font-size: .4rem
            color: #8b8b8b
    .tabs
        display: flex
        margin: .3rem 0 .1rem
        .item
            width: 25%
            img
                width: 1.02rem
                height: 1.02rem
                display: block
                margin: 0 auto
            a
                text-align: center
                display: block
                line-height: .59rem
                font-size: .24rem
                color: #222222
    .search
        width: 4.22rem
        height: .54rem
        border-bottom: .05rem solid #797979
        margin: .15rem auto .26rem
        display: flex
        i
            font-size: .36rem
            line-height: .54rem
            margin: 0 .3rem 
        input
            width: 100%
            height: 100%
            display: block
    .swiper
        height: 4.2rem
        img
            width: 100%
            height: 100%
            object-fit: cover








.line
    height: .2rem
    background: #f3f4f5
::v-deep .mint-swipe-indicator
    opacity: .5
    background: #fff
::v-deep  .mint-swipe-indicator
    width: .2rem
    height: .2rem
::v-deep  .mint-swipe-indicator.is-active
    opacity: 1
</style>